<template>
    <div class="coordinates">
        <!-- 经度 -->
        <div class="item">
           <span class="itude"
                 @click="itudeChange(true)">{{ longFlag | longitudeName }}</span>
            <el-input v-model.number="longitude[0]"
                      size="mini"
                      @change="change(true,0)">
                <i slot="suffix">°</i>
            </el-input>
            <el-input v-model.number="longitude[1]"
                      size="mini"
                      @change="change(true,1)">
                <i slot="suffix">′</i>
            </el-input>
            <el-input v-model.number="longitude[2]"
                      size="mini"
                      @change="change(true,2)">
                <i slot="suffix">″</i>
            </el-input>
        </div>
        <!-- 纬度 -->
        <div class="item">
           <span class="itude"
                 @click="itudeChange(false)">{{ latFlag | latitudeName }}</span>
            <el-input v-model.number="latitude[0]"
                      size="mini"
                      @change="change(false,0)">
                <i slot="suffix">°</i>
            </el-input>
            <el-input v-model.number="latitude[1]"
                      size="mini"
                      @change="change(false,1)">
                <i slot="suffix">′</i>
            </el-input>
            <el-input v-model.number="latitude[2]"
                      size="mini"
                      @change="change(false,2)">
                <i slot="suffix">″</i>
            </el-input>
        </div>
    </div>
</template>
<script>
import math from 'mathjs'
export default {
    name: 'Coordinates',
    props: {
        value: { //绑定的 value
            type: Array,
            require: true,
            validator: function (value) {
                let len = value.length > 0 && value.length === 2;
                let isvalid = Math.abs(value[0]) < 180 && Math.abs(value[1]) < 90;
                return len && isvalid
            },
            default: function () {
                return []
            }
        }
    },
    // model: { // prop为 value 时不用实现 model 但是this.$emit(event,arg) 传入的event需要为 'input'
    //  prop: 'value',
    //  event: 'returnBack'
    // },
    data() {
        return {
            longitude: [], // 经度
            latitude: [],  // 纬度
            longFlag: '+', //表示东经西经
            latFlag: '+',  //表示南纬北纬
        }
    },
    created: function () {
        this.initData();
    },
    filters: {
        longitudeName(value) {
            return value === '+' ? "东经" : "西经"
        },
        latitudeName(value) {
            return value === '+' ? "南纬" : "北纬"
        }
    },
    watch: {
        /**
         * 监测父组件绑定的value
         */
        value() {
            this.initData();
        }
    },
    computed: {
        // 转换为  东经 XXX°XX′XX″  格式
        // 返回一个经纬度的数组
        formatString() {
            let longitude = (this.longFlag === '+' ? "东经 " : "西经 ") + this.longitude[0] + '°' + this.longitude[1] + '′' + this.longitude[2] + '″';
            let latitude = (this.latFlag === '+' ? "南纬 " : "北纬 ") + this.latitude[0] + '°' + this.latitude[1] + '′' + this.latitude[2] + '″';
            return [longitude, latitude]
        }
    },
    methods: {
        /**
         * 东经西经，南纬北纬 change事件
         */
        itudeChange(flag) {
            flag ? (this.longFlag = (this.longFlag === '+' ? '-' : '+')) : (this.latFlag = (this.latFlag === '+' ? '-' : '+'))
            this.returnBackFn()
        },
        /**
         * 初始化数据，父组件修改绑定的value时调用
         */
        initData() {
            this.longitude = this.D2Dms(Math.abs(this.value[0]));
            this.latitude = this.D2Dms(Math.abs(this.value[1]));
            this.longFlag = this.value[0] < 0 ? '-' : '+';
            this.latFlag = this.value[1] < 0 ? '-' : '+'
        },
        /**
         * 输入框change事件，数据合法性验证
         */
        change(flag, index) {
            let name = '', max = 0;
            flag ? [name, max] = ['longitude', 179] : [name, max] = ['latitude', 89];
            index ? max = 59 : null;
            let value = parseInt(this[name][index], 10);
            if (isNaN(value)) {
                value = 0;
            }
            value = value < 0 ? 0 : value;
            value = value > max ? max : value;
            this.$set(this[name], index, value);
            this.returnBackFn()
        },
        /**
         * v-model 绑定事件 双向绑定实现
         */
        returnBackFn() {
            let longitude = parseFloat(this.longFlag + this.Dms2D(this.longitude));
            let latitude = parseFloat(this.latFlag + this.Dms2D(this.latitude));
            let array = [longitude, latitude];
            this.$emit('input', array);
        },
        /**
         * 度转度分秒
         */
        D2Dms(d_data = 0) {
            let degree = parseInt(d_data);
            let min = parseInt((d_data - degree) * 60);
            let sec = parseInt((d_data - degree) * 3600 - min * 60);
            return [degree, min, sec];
        },
        /**
         * 度分秒转度
         */
        Dms2D(dms_data = [0, 0, 0]) {
            let d = parseFloat(dms_data[0]);
            let m = parseFloat(dms_data[1]);
            let s = parseFloat(dms_data[2]);
            return this.keepFourDecimal(d + m / 60 + s / 60 / 60);
        },
        /**
         * 保留四位小数，小于四位精度可能丢失
         */
        keepFourDecimal(num) {
            let result = parseFloat(num);
            if (isNaN(result)) {
                return 0;
            }
            result = Math.round(num * 10000) / 10000;
            return result;
        }
    },
}
</script>


